<template>
  <div class="box pagestyle">
    <div class="container" v-if="radio1 == 1">
      <div class="style">
        <el-radio-group v-model="radio1">
          <el-radio-button label="1">表格设置</el-radio-button>
          <el-radio-button label="2">编号规则</el-radio-button>
        </el-radio-group>
        <div class="table_style">
          <div class="item_row">
            <div class="item">
              <div class="title">表格字号</div>
              <el-select
                v-model="formData.tableSize"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in fontSizes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="item">
              <div class="title">表格行高</div>
              <el-select
                v-model="formData.tableHeight"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in rowHeight"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="item">
              <div class="title">弹窗表格字号</div>
              <el-select
                v-model="formData.popupSize"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in fontSizes2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="item">
              <div class="title">弹窗表格行高</div>
              <el-select
                v-model="formData.popupHeight"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="item in rowHeight2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div class="item_row">
            <div class="item">
              <div class="title">表头颜色</div>
              <div class="color_switch">
                <el-switch v-model="formData.tableHeadColorStatus" />
                <div class="color" @click="clickColor1" :class="{disableselect:!formData.tableHeadColorStatus}">
                  <div
                    class="color_box"
                    :style="{ background: formData.tableHeadColorValue }"
                  ></div>
                  <el-icon color="rgba(62, 70, 79, 0.8)"
                    ><ArrowDownBold
                  /></el-icon>
                </div>
                <el-color-picker
                  ref="color1"
                  v-model="formData.tableHeadColorValue"
                  popper-class="color1"
                  :teleported="false"
                  :disabled="!formData.tableHeadColorStatus"
                />
              </div>
            </div>
            <div class="item">
              <div class="title">间隔行颜色</div>
              <div class="color_switch">
                <el-switch v-model="formData.intervalLineColorStatus" />
                <div class="color" @click="clickColor2" :class="{disableselect:!formData.intervalLineColorStatus}">
                  <div
                    class="color_box"
                    :style="{ background: formData.intervalLineColorValue }"
                  ></div>
                  <el-icon color="rgba(62, 70, 79, 0.8)"
                    ><ArrowDownBold
                  /></el-icon>
                </div>
                <el-color-picker
                  ref="color2"
                  v-model="formData.intervalLineColorValue"
                  popper-class="color2"
                  :teleported="false"
                  :disabled="!formData.intervalLineColorStatus"
                />
              </div>
            </div>
            <div class="item">
              <div class="title">水平线</div>
              <div class="color_switch">
                <el-switch v-model="formData.levelLineStatus" />
                <div class="color" @click="clickColor3" :class="{disableselect:!formData.levelLineStatus}">
                  <div
                    class="color_box"
                    :style="{ background: formData.levelLineValue }"
                  ></div>
                  <el-icon color="rgba(62, 70, 79, 0.8)"
                    ><ArrowDownBold
                  /></el-icon>
                </div>
                <el-color-picker
                  ref="color3"
                  v-model="formData.levelLineValue"
                  popper-class="color3"
                  :teleported="false"
                  :disabled="!formData.levelLineStatus"
                />
              </div>
            </div>
            <div class="item">
              <div class="title">垂直线</div>
              <div class="color_switch">
                <el-switch v-model="formData.verticalLineStatus" />
                <div class="color" @click="clickColor4" :class="{disableselect:!formData.verticalLineStatus}">
                  <div
                    class="color_box"
                    :style="{ background: formData.verticalLineValue }"
                  ></div>
                  <el-icon color="rgba(62, 70, 79, 0.8)"
                    ><ArrowDownBold
                  /></el-icon>
                </div>
                <el-color-picker
                  ref="color4"
                  v-model="formData.verticalLineValue"
                  popper-class="color4"
                  :teleported="false"
                  :disabled="!formData.verticalLineStatus"
                />
              </div>
            </div>
          </div>
          <div class="item_row">
            <div class="item">
              <div class="title">鼠标悬浮</div>
              <div class="color_switch">
                <el-switch v-model="formData.mouseSuspensionStatus" />
                <div class="color" @click="clickColor5" :class="{disableselect:!formData.mouseSuspensionStatus}">
                  <div
                    class="color_box"
                    :style="{ background: formData.mouseSuspensionValue }"
                  ></div>
                  <el-icon color="rgba(62, 70, 79, 0.8)"
                    ><ArrowDownBold
                  /></el-icon>
                </div>
                <el-color-picker
                  ref="color5"
                  v-model="formData.mouseSuspensionValue"
                  popper-class="color5"
                  :teleported="false"
                  :disabled="!formData.mouseSuspensionStatus"
                />
              </div>
            </div>
            <div class="item">
              <div class="title">自动翻页</div>
              <div class="color_switch">
                <el-switch v-model="formData.autoPagerChrome" />
              </div>
            </div>
            <div class="item">
              <div class="title">翻页间隔</div>
              <el-select
                v-model="formData.flipInterval"
                placeholder="请选择"
                style="width: 100%"
                :disabled="!formData.autoPagerChrome"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div class="item"></div>
          </div>
        </div>
        <div class="list_style">
          <div class="head">列表文字颜色</div>
          <div class="list_style_box">
            <div class="item">
              <div class="title">故障</div>
              <div class="color" @click="listColor1">
                <div
                  class="color_box"
                  :style="{ background: formData.faultColor }"
                ></div>
                <el-icon color="rgba(62, 70, 79, 0.8)"
                  ><ArrowDownBold
                /></el-icon>
              </div>
              <el-color-picker
                ref="color6"
                v-model="formData.faultColor"
                popper-class="color6"
                :teleported="false"
              />
            </div>
            <div class="item">
              <div class="title">断电</div>
              <div class="color" @click="listColor2">
                <div
                  class="color_box"
                  :style="{ background: formData.outageColor }"
                ></div>
                <el-icon color="rgba(62, 70, 79, 0.8)"
                  ><ArrowDownBold
                /></el-icon>
              </div>
              <el-color-picker
                ref="color7"
                v-model="formData.outageColor"
                popper-class="color7"
                :teleported="false"
              />
            </div>
            <div class="item">
              <div class="title">断线</div>
              <div class="color" @click="listColor3">
                <div
                  class="color_box"
                  :style="{ background: formData.disconnectionColor }"
                ></div>
                <el-icon color="rgba(62, 70, 79, 0.8)"
                  ><ArrowDownBold
                /></el-icon>
              </div>
              <el-color-picker
                ref="color8"
                v-model="formData.disconnectionColor"
                popper-class="color8"
                :teleported="false"
              />
            </div>
            <div class="item">
              <div class="title">报警</div>
              <div class="color" @click="listColor4">
                <div
                  class="color_box"
                  :style="{ background: formData.alarmColor }"
                ></div>
                <el-icon color="rgba(62, 70, 79, 0.8)"
                  ><ArrowDownBold
                /></el-icon>
              </div>
              <el-color-picker
                ref="color9"
                v-model="formData.alarmColor"
                popper-class="color9"
                :teleported="false"
              />
            </div>
            <div class="item">
              <div class="title">休眠</div>
              <div class="color" @click="listColor5">
                <div
                  class="color_box"
                  :style="{ background: formData.hibernateColor }"
                ></div>
                <el-icon color="rgba(62, 70, 79, 0.8)"
                  ><ArrowDownBold
                /></el-icon>
              </div>
              <el-color-picker
                ref="color10"
                v-model="formData.hibernateColor"
                popper-class="color10"
                :teleported="false"
              />
            </div>
            <div class="item">
              <div class="title">正常</div>
              <div class="color" @click="listColor6">
                <div
                  class="color_box"
                  :style="{ background: formData.normalColor }"
                ></div>
                <el-icon color="rgba(62, 70, 79, 0.8)"
                  ><ArrowDownBold
                /></el-icon>
              </div>
              <el-color-picker
                ref="color11"
                v-model="formData.normalColor"
                popper-class="color11"
                :teleported="false"
              />
            </div>
            <div class="item">
              <div class="title">高电平</div>
              <div class="color" @click="listColor7">
                <div
                  class="color_box"
                  :style="{ background: formData.highLevelColor }"
                ></div>
                <el-icon color="rgba(62, 70, 79, 0.8)"
                  ><ArrowDownBold
                /></el-icon>
              </div>
              <el-color-picker
                ref="color12"
                v-model="formData.highLevelColor"
                popper-class="color12"
                :teleported="false"
              />
            </div>
            <div class="item">
              <div class="title">低电平</div>
              <div class="color" @click="listColor8">
                <div
                  class="color_box"
                  :style="{ background: formData.lowLevelColor }"
                ></div>
                <el-icon color="rgba(62, 70, 79, 0.8)"
                  ><ArrowDownBold
                /></el-icon>
              </div>
              <el-color-picker
                ref="color13"
                v-model="formData.lowLevelColor"
                popper-class="color13"
                :teleported="false"
              />
            </div>
          </div>
        </div>
        <div class="cell_style">
          <div class="head">列表单元格颜色</div>
          <div class="list_style_box">
            <div class="item">
              <div class="title">检测值背景</div>
              <div class="color" @click="cellColor">
                <div
                  class="color_box"
                  :style="{ background: formData.detectionBackgroundColor }"
                ></div>
                <el-icon color="rgba(62, 70, 79, 0.8)"
                  ><ArrowDownBold
                /></el-icon>
              </div>
              <el-color-picker
                ref="color14"
                v-model="formData.detectionBackgroundColor"
                popper-class="color14"
                :teleported="false"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="btns">
        <el-button>字体</el-button>
        <div class="right">
          <el-button @click="getPageStyle">重置</el-button>
          <el-button type="primary" @click="saveStyle">保存</el-button>
        </div>
      </div>
    </div>
    <div class="container2" v-if="radio1 == 2">
      <el-radio-group v-model="radio1">
        <el-radio-button label="1">表格设置</el-radio-button>
        <el-radio-button label="2">编号规则</el-radio-button>
      </el-radio-group>
      <div class="rules">
        <div class="item">
          <div class="name">模拟量</div>
          <div class="code">A</div>
          <div class="item_box">
            <div class="row">
              <div class="one">分站编号</div>
              <div class="two">001</div>
            </div>
            <div class="row">
              <div class="one">测点编号</div>
              <div class="two">01</div>
            </div>
            <div class="row">
              <div class="one">编号</div>
              <div class="two">001A01</div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="name">开关量</div>
          <div class="code">D</div>
          <div class="item_box">
            <div class="row">
              <div class="one">分站编号</div>
              <div class="two">001</div>
            </div>
            <div class="row">
              <div class="one">测点编号</div>
              <div class="two">02</div>
            </div>
            <div class="row">
              <div class="one">编号</div>
              <div class="two">001D02</div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="name">累计量</div>
          <div class="code">S</div>
          <div class="item_box">
            <div class="row">
              <div class="one">分站编号</div>
              <div class="two">001</div>
            </div>
            <div class="row">
              <div class="one">测点编号</div>
              <div class="two">03</div>
            </div>
            <div class="row">
              <div class="one">编号</div>
              <div class="two">001S03</div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="name">虚拟测点</div>
          <div class="code">V</div>
          <div class="item_box">
            <div class="row">
              <div class="one">分站编号</div>
              <div class="two">001</div>
            </div>
            <div class="row">
              <div class="one">测点编号</div>
              <div class="two">04</div>
            </div>
            <div class="row">
              <div class="one">编号</div>
              <div class="two">001A04V</div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="name">多参测点</div>
          <div class="code">M</div>
          <div class="item_box">
            <div class="row">
              <div class="one">分站编号</div>
              <div class="two">001</div>
            </div>
            <div class="row">
              <div class="one">测点编号</div>
              <div class="two">05</div>
            </div>
            <div class="row">
              <div class="one">编号</div>
              <div class="two">001M05A01</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import axios from "@/utils/request";
import { getToken } from "@/utils/auth";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { onMounted } from "vue";

const router = useRouter();
const radio1 = ref("1");

let color1 = ref();
let color2 = ref();
let color3 = ref();
let color4 = ref();
let color5 = ref();
let color6 = ref();
let color7 = ref();
let color8 = ref();
let color9 = ref();
let color10 = ref();
let color11 = ref();
let color12 = ref();
let color13 = ref();
let color14 = ref();
const fontSizes = ref([
    {value:'12px',label:'12px'},
    {value:'14px',label:'14px'},
    {value:'16px',label:'16px'},
    {value:'18px',label:'18px'},
])
const fontSizes2 = ref([
    {value:'12px',label:'12px'},
    {value:'14px',label:'14px'},
    {value:'16px',label:'16px'},
    {value:'18px',label:'18px'},
])
const rowHeight = ref([
    {value:'24px',label:'24px'},
    {value:'32px',label:'32px'},
    {value:'40px',label:'40px'},
    {value:'48px',label:'48px'},
    {value:'56px',label:'56px'},
])
const rowHeight2 = ref([
    {value:'24px',label:'24px'},
    {value:'32px',label:'32px'},
    {value:'40px',label:'40px'},
    {value:'48px',label:'48px'},
    {value:'56px',label:'56px'},
])
const form = ref({
  color1: "",
  color2: "",
  color3: "",
  color4: "",
  color5: "",
  color6: "#ff9900",
  color7: "#ffdd33",
  color8: "#ee66bb",
  color9: "#ff5555",
  color10: "#88aacc",
  color11: "#3e464f",
  color12: "#6688ff",
  color13: "#55cc99",
  color14: "",
  fontSize:"14px",
  fontSize2:"14px",
  rowheight:"48px",
  rowheight2:"48px",
});
const formData = ref({})

// 选择表头颜色
const clickColor1 = () => {
  color1.value.show();
};
// 选择间隔行颜色
const clickColor2 = () => {
  color2.value.show();
};
// 选择水平线
const clickColor3 = () => {
  color3.value.show();
};
// 选择垂直线
const clickColor4 = () => {
  color4.value.show();
};
// 选择鼠标悬浮颜色
const clickColor5 = () => {
  color5.value.show();
};
// 选择故障颜色
const listColor1 = () => {
  color6.value.show();
};
// 选择断电颜色
const listColor2 = () => {
  color7.value.show();
};
// 选择断电颜色
const listColor3 = () => {
  color8.value.show();
};
// 选择报警颜色
const listColor4 = () => {
  color9.value.show();
};
// 选择休眠颜色
const listColor5 = () => {
  color10.value.show();
};
// 选择休眠颜色
const listColor6 = () => {
  color11.value.show();
};
// 选择高电平颜色
const listColor7 = () => {
  color12.value.show();
};
// 选择低电平颜色
const listColor8 = () => {
  color13.value.show();
};
// 选择监测值背景颜色
const cellColor = () => {
  color14.value.show();
};


// 获取页面编辑样式
const getPageStyle = () => {
  axios.post('/page/edit/queryPageDetail',{mark:'A'}).then(res => {
    formData.value = res.data[0]
  })
}

// 保存样式到本地
const saveLocal = () =>{
  document.querySelector(':root').style.setProperty('--font-size',formData.value.tableSize);
  document.querySelector(':root').style.setProperty('--row-height',formData.value.tableHeight);
  if(formData.value.tableHeadColorStatus){
    document.querySelector(':root').style.setProperty('--header-bg',formData.value.tableHeadColorValue);
  }else{
    document.querySelector(':root').style.setProperty('--header-bg','#e3effe');
  }
  if(formData.value.intervalLineColorStatus){
    document.querySelector(':root').style.setProperty('--stripe-bg',formData.value.intervalLineColorValue);
  }else{
    document.querySelector(':root').style.setProperty('--stripe-bg','#f0f3f9');
  }
  if(formData.value.levelLineStatus){
    document.querySelector(':root').style.setProperty('--hline-color',formData.value.levelLineValue);
  }else{
    document.querySelector(':root').style.setProperty('--hline-color','#ebeef5');
  }
  if(formData.value.verticalLineStatus){
    document.querySelector(':root').style.setProperty('--vline-color',formData.value.verticalLineValue);
  }else{
    document.querySelector(':root').style.setProperty('--vline-color','#ebeef5');
  }
  let pageSttting = {
    "fontSize": formData.value.tableSize,
    "rowHeight": formData.value.tableHeight,
    "headerBg": formData.value.tableHeadColorStatus?formData.value.tableHeadColorValue:'#e3effe',
    "stripeBg": formData.value.intervalLineColorStatus?formData.value.intervalLineColorValue:'#f0f3f9',
    "hlineColor": formData.value.levelLineStatus?formData.value.levelLineValue:'#ebeef5',
    "vlineColor": formData.value.verticalLineStatus?formData.value.verticalLineValue:'#ebeef5',
  };
  localStorage.setItem("page-set", JSON.stringify(pageSttting));
}

// 保存页面样式 /page/edit/update
const saveStyle = () =>{
  formData.value.vxeheadersList = []
  axios.post('/page/edit/update',formData.value).then(res => {
    if(res.code == 200){
      ElMessage.success('操作成功')
      getPageStyle()
      saveLocal()
    }
  })
}

onMounted(()=>{
  // getPageStyle()
})
</script>
<style lang="scss" scoped>
// 禁止选择
.disableselect:hover{
  cursor: not-allowed !important;
}

::v-deep .el-color-picker {
  display: none;
}

.box {
  padding: 12px;
  .container {
    height: 100%;
    padding: 16px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title {
      font-size: 14px;
      color: rgba(62, 70, 79, 0.8);
    }
    .style {
      height: 79.4%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .table_style {
        height: 37.5%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .item_row {
          width: 100%;
          display: flex;
          justify-content: space-between;
          .item {
            width: 22.5%;
            height: 58px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .color_switch {
              display: flex;
              .color {
                margin-left: 16px;
                padding: 4px;
                width: 100px;
                height: 32px;
                background-color: #f0f7ff;
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 14px;
                .color_box {
                  width: 71px;
                  height: 24px;
                }
              }
              ::v-deep .color1 {
                inset: 250px auto auto 25px !important;
              }
              ::v-deep .color2 {
                inset: 250px auto auto 26.5% !important;
              }
              ::v-deep .color3 {
                inset: 250px auto auto 51.5% !important;
              }
              ::v-deep .color4 {
                inset: 250px auto auto 76.5% !important;
              }
              ::v-deep .color5 {
                inset: 330px auto auto 25px !important;
              }
            }
          }
        }
      }
      .list_style {
        height: 15%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .head {
          font-size: 14px;
          color: rgba(62, 70, 79, 1);
          font-weight: 700;
        }
        .list_style_box {
          height: calc(100% - 26px);
          display: flex;
          justify-content: space-between;
          .item {
            width: 10%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .color {
              padding: 5px;
              width: 100%;
              height: 32px;
              background-color: #f0f7ff;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 14px;
              .color_box {
                width: 63%;
                height: 24px;
              }
            }
            ::v-deep .color6 {
              inset: 465px auto auto 25px !important;
            }
            ::v-deep .color7 {
              inset: 465px auto auto 14% !important;
            }
            ::v-deep .color8 {
              inset: 465px auto auto 26.5% !important;
            }
            ::v-deep .color9 {
              inset: 465px auto auto 39% !important;
            }
            ::v-deep .color10 {
              inset: 465px auto auto 51.5% !important;
            }
            ::v-deep .color11 {
              inset: 465px auto auto 63.5% !important;
            }
            ::v-deep .color12 {
              inset: 465px auto auto 76.5% !important;
            }
            ::v-deep .color13 {
              inset: 465px 25px auto auto !important;
            }
          }
        }
      }
      .cell_style {
        height: 15%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .head {
          font-size: 14px;
          color: rgba(62, 70, 79, 1);
          font-weight: 700;
        }
        .list_style_box {
          height: calc(100% - 26px);
          display: flex;
          justify-content: space-between;
          .item {
            width: 10%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .color {
              padding: 5px;
              width: 100%;
              height: 32px;
              background-color: #f0f7ff;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 14px;
              .color_box {
                width: 63%;
                height: 24px;
              }
            }
            ::v-deep .color14 {
              inset: 550px auto auto 200px !important;
            }
          }
        }
      }
    }
    .btns {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
  .container2 {
    height: 100%;
    padding: 16px;
    background-color: #fff;
    .rules {
      margin-top: 16px;
      height: 37%;
      display: flex;
      justify-content: space-between;
      .item {
        padding: 22px 16px;
        width: 19%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        background: linear-gradient(
          180deg,
          rgba(242, 247, 255, 1) 0%,
          rgba(255, 255, 255, 1) 100%
        );
        border-radius: 4px;
        .name {
          font-size: 16px;
          color: rgba(62, 70, 79, 1);
          font-weight: 700;
        }
        .code {
          width: 80px;
          height: 28px;
          font-size: 16px;
          font-weight: 700;
          background-color: #e8f2ff;
          color: rgba(64, 158, 255, 1);
          border-radius: 2px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .item_box {
          padding: 16px;
          width: 100%;
          height: 130px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .row {
            font-size: 14px;
            color: rgba(62, 70, 79, 1);
            display: flex;
            justify-content: space-between;
            .two {
              font-weight: 700;
            }
          }
        }
      }
    }
  }
}
</style>
